class page {
    constructor(ops) {
        this.prev = ops.prev;
        this.next = ops.next;
        this.pageCont = ops.pageCont;
        this.data = ops.data;
        this.num = ops.num || 5;
        this.index = ops.index || 0;
        this.cont = ops.cont;

        // 生成页码
        this.init();
        // 绑定事件
        this.addEvent();
        // 初始渲染页面
        this.display()
    }
    init() {
        let str = '';
        // 计算显示页码
        this.maxNum = Math.ceil(this.data.length / this.num);
        // 生成页码结构
        for (let i=0; i<this.maxNum; i++) {
            str += `
            <li data-index="${i}">
                <span>${i+1}</span>
            </li>`;
        }
        this.pageCont.html(str)
        // 设置当前项；
        this.setActive();
    }
    setActive() {
        for (let i=0; i<this.pageCont.children().length; i++) {
            this.pageCont.children().eq(i).removeClass("active");
        }
        this.pageCont.children().eq(this.index).addClass("active")
    }
    addEvent() {
        let _this = this;
        // 上一项事件
        this.prev.on("click",function() {
            if (_this.index === 0) _this.index = 0;
            else _this.index--;
            // 渲染页码当前项
            _this.display();
            _this.setActive();
        })
        // 下一页事件
        this.next.on("click",function() {
            if (_this.index === _this.maxNum-1) _this.index = _this.maxNum-1;
            else _this.index++;
            // 渲染页码当前项
            _this.display();
            _this.setActive();
        })
        // 每页事件
        for (let i=0; i<this.pageCont.children().length; i++) {
            this.pageCont.children().eq(i).click(function() {
                _this.index = parseInt($(this).attr("data-index"));
                // 渲染页码 当前项
                _this.display();
                _this.setActive();
            });
        }
    }
    display() {
        let str = "";
        for (let i=this.index*this.num; i<this.index*this.num+this.num; i++) {
            if (i<this.data.length) {
                str += `
                    <li>
                        <a href="javascript:;"  data-goodsId = "${this.data[i].goodsId}">
                            <img src="${this.data[i].goodsImg}" alt="${this.data[i].goodsTit}">
                            <span>${this.data[i].goodsTit}</span>
                        </a>
                    </li> `;
            }
        }
        this.cont.html(str);
    }
}
// new Page({
//     prev:document.getElementById(),         // 上一页的标签
//     next:document.getElementById(),         // 下一页的标签
//     pageCont:document.getElementById(),         // 页码的容器
//     data:[],        // 数据
//     num:10,         // 单页数据条数
//     index:0         // 默认显示第几页
//     page:document.getElementById()  // 商品盒子
// });